<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h40 {
                height: 40px;
                line-height: 40px;
            }
            
            .row {
                display: -webkit-box;
                display: -webkit-flex;
                flex: display;
            }
            
            .col {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
            
            .hightitem {
                background-color: #fff;
            }
            
            .brb {
                border-bottom: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }
            
            .bb {
                border-bottom: 1px solid #e0e0e0;
            }
            
            .matrix3 {
                display: table;
                height: inherit;
                width: 100%;
            }
            
            .matrix3 .matrixcell {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            
            .col img {
                width: 20px;
                position: relative;
                top: 5px;
                left: -4px;
            }
            
            .section02 .logocover {
                text-align: center;
                margin-top: 5px;
            }
            
            .section02 .col img {
                width: 70%;
                margin-bottom: 3px;
            }
            
            .section02 .title {
                margin-top: 10px;
            }
            
            .section02 .title div {
                font-size: 14px;
                color: #666;
                margin-top: 5px;
            }
            
            .title0201 .title {
                color: #FE8501;
            }
            
            .title0202 .title {
                color: #83B235;
            }
            
            .title0203 .title {
                color: #2E8AE0;
            }
            
            .section03 .matrixcell {
                text-align: left;
                margin-left: 10px;
            }
            
            .section03 .col img {
                position: absolute;
                right: 10px;
                top: 10px;
                left: inherit;
                width: 60px;
            }
            
            .section03 .col {
                height: 60px;
            }
            
            .section03 .col .title {
                margin-left: 10px;
                font-size: 14px;
            }
            
            .section03 .col .subtitle {
                margin-left: 10px;
                margin-top: 5px;
                font-size: 12px;
                color: #666;
            }
            
            .tabbar {
                text-align: center;
            }
            
            .tabbar .col {
                background-color: '#000';
            }
            
            .tabbar .col-act {
                background-color: '#f60';
            }
            
            .indicator {
                height: 3px;
                width: 100%;
                background: #f60;
                position: absolute;
                bottom: 0;
                display: none;
            }
            
            .indicator-act {
                display: block;
            }
            
            .home-tuan-list {
                display: none;
            }
            
            .home-tuan-list-act {
                display: block;
            }
            
            .home-tuan-list .item {
                position: relative;
                display: block;
                padding-left: 10px;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .home-tuan-list .cnt {
                padding: 7px 10px 10px 0;
                display: box;
                display: -webkit-box;
                min-height: 78px;
                background-size: auto 1px;
            }
            
            .home-tuan-list .pic {
                margin-right: 10px;
                background: center;
            }
            
            .home-tuan-list img {
                width: 90px;
                height: 66px;
                margin-top: 7px;
                margin-bottom: 5px;
                border-radius: 3px;
            }
            
            .home-tuan-list .wrap {
                -webkit-box-flex: 1;
            }
            
            .home-tuan-list .wrap2 {
                display: table;
                height: 88px;
                width: 100%;
            }
            
            .home-tuan-list .content {
                -webkit-box-flex: 1;
                box-flex: 1;
                display: table-cell;
                vertical-align: middle;
            }
            
            .home-tuan-list .shopname {
                color: #333;
                font-size: 17px;
                max-width: 11em;
                white-space: nowrap;
                word-wrap: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                min-height: 10px;
                padding-bottom: 2px;
                padding-top: 3px;
                display: inline-block;
            }
            
            .home-tuan-list .title {
                color: #666;
                line-height: 16px;
                font-size: 13px;
                max-height: 30px;
                overflow: hidden;
                padding-top: 3px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .home-tuan-list .hot-title {
                margin-bottom: 8px;
            }
            
            .home-tuan-list .hot-subtitle {
                margin-bottom: 9px;
            }
            
            .home-tuan-list .info {
                margin-top: 9px;
                color: #666;
                font-size: 12px;
                position: relative;
                line-height: 15px;
                display: box;
                display: -webkit-box;
                height: 15px;
            }
            
            .home-tuan-list .symbol {
                font-size: 14px;
                color: #f60;
                display: block;
                margin-top: 1px;
            }
            
            .home-tuan-list .price {
                color: #f60;
                font-size: 20px;
                line-height: 15px;
                margin-right: 5px;
                margin-top: 1px;
            }
            
            .home-tuan-list .o-price {
                color: #999;
                margin-top: 5px;
                line-height: 10px;
            }
            
            .home-tuan-list .sale {
                color: #f63;
                border: solid 1px #ff916e;
                padding: 3px 2px 2px;
                font-size: 10px;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                margin-left: 5px;
                line-height: 10px;
                height: 10px;
            }
            
            .home-tuan-list .distance {
                -webkit-box-flex: 1;
                box-flex: 1;
                -ms-box-flex: 1;
                -ms-flex: 1;
                text-align: right;
                line-height: 10px;
                margin-top: 5px;
                color: #999;
                float: right;
                font-size: 12px;
            }
            
            .home-tuan-list .price,
            .index-rec .home-tuan-list .o-price,
            .index-rec .home-tuan-list .distance,
            .index-rec .home-tuan-list .sale {
                display: block;
                line-height: 15px;
                font-size: 12px;
            }
            
            .Fix:after {
                display: block;
                content: '';
                height: 0;
                clear: both;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <div class="h1"></div>
        <div class="row hightitem">
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":8}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/food.png">美食</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":2}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/movie.png">电影</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb open-win" win="shoplist" param='{"type":1,"shopType":6}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/hotel.png">酒店</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hightitem">
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":1}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/ktv.png">KTV</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":14}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/massage.png">足疗</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb open-win" win="shoplist" param='{"type":1,"shopType":7}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/girl.png">丽人</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row hightitem">
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":2}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/ticket.png">门票</div>
                    </div>
                </div>
            </div>
            <div class="col h40 brb open-win" win="shoplist" param='{"type":1,"shopType":4}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/shopping.png">购物</div>
                    </div>
                </div>
            </div>
            <div class="col h40 bb open-win" win="shoplist" param='{"type":1,"shopType":-1}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div><img src="../image/groupbuy/all.png">全部</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h20"></div>
        <div class="row hightitem section02">
            <div class="col title0201 brb open-win" win="search" param='{"keyword":"光谷"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">
                            1元秒杀
                            <div>天天开抢</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_01.png"></div>
            </div>
            <div class="col title0202 brb open-win" win="search" param='{"keyword":"影城"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">世纪难题
                            <div>周末去哪</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_02.png"></div>
            </div>
            <div class="col title0203 bb open-win" win="search" param='{"keyword":"美食"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">排行榜
                            <div>最赞火锅榜</div>
                        </div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/groupbuy/logo_03.png"></div>
            </div>
        </div>
        <div class="row hightitem section03">
            <div class="col brb open-win" win="search" param='{"keyword":"俱乐部"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">精选密室</div>
                        <div class="subtitle">打开你的脑洞</div>
                    </div>
                </div>
                <img src="../image/groupbuy/logo_04.png">
            </div>
            <div class="col bb open-win" win="search" param='{"keyword":"家居"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">热门团购</div>
                        <div class="subtitle">火爆热门团购</div>
                    </div>
                </div>
                <img src="../image/groupbuy/logo_05.png">
            </div>
        </div>
        <div class="h20"></div>
        <div class="row hightitem tabbar" id="tabbar">
            <div class="col h40" tapmode onclick="fnChange(0)">
                为你精选
                <div class="indicator indicator-act"></div>
            </div>
            <div class="col h40" tapmode onclick="fnChange(1)">
                附近最热
                <div class="indicator"></div>
            </div>
            <div class="col h40" tapmode onclick="fnChange(2)">
                今日最新
                <div class="indicator"></div>
            </div>
        </div>
        <div id="list" class="home-tuan-list home-tuan-list-act"></div>
    </body>
    <script id="template" type="text/template">
        {{~ it:data }}
        <div class="item Fix hightitem open-win" win="shop" param='{"shopId":"{{= data.id }}","price":{{= data.price }},"shopName":"{{= data.shopName }}"}'>
            <div class="cnt">
                <img id="thumbnail_{{= data.id }}" class="pic" src="../image/default.jpg">
                <div class="wrap">
                    <div class="wrap2">
                        <div class="content">
                            <div class="shopname">{{= data.shopName}}</div>
                            <span id="distance_{{= data.id }}" class="distance"></span>
                            <div class="title">{{= data.shopDescription }}</div>
                            <div class="info">
                                <span class="symbol">¥</span>
                                <span class="price">{{= data.price }}</span> {{~ data.sales:sales }}
                                <span class="sale">{{= salesType[sales] }}</span> {{~}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{~}}
    </script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/SHA1.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/remotedb.js"></script>
    <script type="text/javascript" src="../script/list.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnInit();

            fnReadyOpenWin();

            fnInitList('shop');

            fnChange(0);
        };

        var bars, indicators;

        function fnInit() {
            var tabbar = $api.byId('tabbar');
            tabbars = $api.domAll(tabbar, '.col');
            indicators = $api.domAll(tabbar, '.indicator');
        };

        function fnChange(index) {
            for (var i = 0; i < tabbars.length; i++) {
                if (index == i) {
                    $api.addCls(tabbars[i], 'col-act');
                    $api.addCls(indicators[i], 'indicator-act');
                } else {
                    $api.removeCls(tabbars[i], 'col-act');
                    $api.removeCls(indicators[i], 'indicator-act');
                }
            }

            where = {
                groupbuyType: 1,
                groupbuy: index
            };

            api.refreshHeaderLoading();
        };
    </script>

</html>
